<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>
</head>
<body>
<form name="form1" method="post" action="/file/upload" enctype="multipart/form-data">
    Minio 文件上传: <input type="file" name="file">
    <input type="hidden" name="bucketName" value="pearl-buckent" >
    <input type="submit" value="点击上传"/>
</form>

<form name="form1" method="post" action="/file/spring/upload" enctype="multipart/form-data">
    选择文件form1: <input type="file" name="file">
    <input type="submit" value="点击上传"/>
</form>


<form name="form3" method="post" action="/file/download" enctype="application/x-www-form-urlencoded">
    输入文件完整路径: <input type="text" name="filePath">
    <input type="submit" value="下载文件"/>
</form>

<h2>上传多个文件</h2>
<form action="/file/uploads" method="post"  enctype="multipart/form-data">
    <p>选择文件:<input type="file" name="files"></p>
    <p>选择文件:<input type="file" name="files"></p>
    <p><input type="submit" value="提交"></p>
</form>


<h2>Minio上传</h2>


<h2>分片上传</h2>
<p>选择文件: <input type="file" id="file" name="file"/></p>
<p><input type="submit" value="提交" onclick="commit()"/></p>

</body>
<script>
    // 每个文件切片大小定为1M(1024*1024字节)(需要跟服务器协商好).
    var BYTES_PER_SLICE = 1<<20;
    // 已发送的数量
    var  hasSendNum = 0;
    // 总切片数
    var totalSlices;

    // 提交方法
    function commit() {
        // 拿出选中的第一个文件
        var file = document.getElementById("file").files[0];
        // 文件的总字节数
        var totalSize = file.size;
        // 当前片数
        var index = 0;
        // 分片的开始、结束（不含）
        var start,end;
        // 文件名
        var fileName = file.name;
        // 初始化已发送数量为0
        hasSendNum = 0;

        // 计算文件切片总数（向上取整）
        totalSlices = Math.ceil(file.size / BYTES_PER_SLICE);
        // 不断循环将切片上传
        while(index < totalSlices) {

            start = index*BYTES_PER_SLICE;
            end = start + BYTES_PER_SLICE;

            var slice =file.slice(start,end);//切割文件
            uploadFile(slice, index++,fileName);
        }
    }

    //上传文件
    function uploadFile(slice, index,fileName) {
        var retry = 1;
        var formDate = new FormData();
        formDate.append("slice", slice);
        formDate.append("fileName",fileName);
        formDate.append("index",index);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'sliceUpload', true);//false指同步上传，因为我的服务器内存较小，选择同步，如果追求速度，可以选择 //ture，异步上传
        xhr.onreadystatechange = ()=>uploadCallBack(xhr,slice,index,fileName);
        xhr.send(formDate);

    }

    /**
     * @desc 上传回调
     * @param xhr
     */
    function uploadCallBack(xhr,slice,index,fileName) {
        if(xhr.readyState==4) {
            if(xhr.status==200) {
                if(xhr.responseText==1) {
                    hasSendNum++;
                    console.log("第"+index+"片，完成度"+parseInt(hasSendNum/totalSlices*100)+"%");
                    if(hasSendNum==totalSlices) {
                        console.log("上传完毕");
                    }
                }
            } else {
                console.log("上传失败，重试##################################");
                // 重试
                uploadFile(slice, index,fileName);
            }
        }
    }
</script>
</html>